<template>
	<view class="card">
		<view class="app-q">
			<text> 派车单 {{rowCard.shipOrderNo?rowCard.shipOrderNo:'-'}}</text>
			<text class="deede">{{shipStatus[rowCard.shipStatus]}}</text>
		</view>
		<view class="middle">
			<view class="ad" :class="{'ad--1':rowCard.type == -1,'ad-0':rowCard.type == 0}">
				<text class="de-io">{{status[rowCard.type]}}</text>
			</view>
			<view class="adc">
				<view class="aasdas conmon">
					{{rowCard.vehiclesCode?rowCard.vehiclesCode:'-'}}
				</view>
				<view class="a-dek conmon">
					司机:{{rowCard.driverName ?rowCard.driverName :'-'}}
				</view>
			</view>
		</view>
		<view class="card-footer">
			<view class="time">
				{{rowCard.signingTime?rowCard.signingTime:'-'}}
			</view>
			<view class="button-h" v-if="rowCard.evaluateStatus == 1">
				<!-- <view class="r1">
					<text class="huochesiji">联系司机</text>
				</view> -->
				<view class="r1" @click="update(rowCard,2)">
					<text class="huochesiji">我要评价</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "card",
		props: {
			cardType: {
				type: [Number],
			},
			row: {
				type: [Object],
				default: () => {
					return {
						shipOrderNo: ''
					}
				}
			}
		},
		data() {
			return {
				status: {
					[-1]: '合车',
					[0]: '常温',
					[1]: '冷链'
				},
				// 配送类型(0 进行中, 1 已完成, 2 司机到店待门店确认, 3 门店已签收, 4 门店已验货, 5 运费已结算, -1 失败
				shipStatus: {
					[-1]: '失败',
					[0]: '待配送',
					[1]: '已送达',
					[2]: '已送达',
					[3]: '已签收',
					[4]: '已签收',
					[5]: '已签收',
				},
				rowCard: {
					shipOrderNo: ''
				}
			};
		},
		mounted() {
			this.rowCard = this.row;
		},
		methods: {
			update(item, type) {
				this.$emit('update', {
					type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx 32rpx;

		.app-q {
			height: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #000000;
			line-height: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.deede {
				// margin-top: 8rpx;
				height: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #02B597;
				line-height: 40rpx;
			}
		}

		.middle {
			display: flex;
			margin-top: 16rpx;

			.ad {
				width: 80rpx;
				height: 40rpx;
				background-color: #D7E5FF;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.de-io {
					font-weight: 550;
					font-size: 23rpx;
					color: #1752D6;
				}
			}

			.adc {
				margin-left: 32rpx;

				.conmon {
					height: 40rpx;
					line-height: 40rpx;
				}

				.aasdas {
					font-weight: 550;
					font-size: 32rpx;
					color: #000000;
				}

				.a-dek {
					font-weight: 400;
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.card-footer {
			padding-top: 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.time {
				height: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999;
				line-height: 40rpx;
			}

			.button-h {
				display: flex;

				.r1+.r1 {
					margin-left: 24rpx;
				}

				.r1 {
					width: 122rpx;
					height: 48rpx;
					background-color: #F5F8FF;
					border-radius: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.huochesiji {
						// width: 80rpx;
						font-weight: 550;
						font-size: 22rpx;
						color: #363F73;
					}
				}
			}
		}
	}
</style>